<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="animate.min.css">
</head>

<body>
<div class="black"></div>
<!--以上是一个黑色遮罩-->
<div class="Login_interface clear">
    <div>
        <div class="wrapper_Input_box">
            <label class="account"></label>
            <input type="text" class="Input_box" placeholder="example@163.com">
        </div>
        <div class="wrapper_Input_box" style="margin-top:0;">
            <label class="password"></label>
            <input type="password" class="Input_box" style="border-top: 0">
        </div>
    </div>
    <!--以上是账号输入框和密码输入框的内容-->
    <div class="dl">登录</div>
    <div class="register_Forget_password clear">
        <div class="register">
            <a href="#" style="color: #0e030a">立即注册</a>
        </div>
        <div class="Forget_password" style="float: right">
            <a href="#" style="color: #ff3333">忘记密码</a>
        </div>
    </div>
    <!--以上是登录立即注册忘记密码内容-->
    <div class="third_login">
        <p class="title">社交账号登录</p>
        <div class="Icon">
            <div class="tb">
                <a href="#" class="iconfont" style="color: #68a5e1">&#xe678;</a>
            </div>
            <div class="tb">
                <a href="#" class="iconfont" style="color: #f56467">&#xe603;</a>
            </div>

        </div>
    </div>
    <!--以上是社交账号登录-->
    <div class="Edition">
        <div class="Standard_Edition">
            <div class="S_E_Icon"></div>
            <div class="Version_introduction">标准版</div>
        </div>
        <div class="Standard_Edition">
            <div class="C_E_Icon"></div>
            <div class="Version_introduction">简约版</div>
        </div>
        <div class="Standard_Edition">
            <div class="C_V_Icon"></div>
            <div class="Version_introduction">电脑版</div>
        </div>

    </div>
    <!--以上是版本切换-->
</div>
<!------------------------------------以上是登录界面-------------------------------->
<div class="w_icon-gotop" style="position: fixed;z-index: 999999">
 <a class="icon-gotop iconfont">&#xe65a;</a>
</div>
<div class="feed_back">
    <a class="icon-suggest">反馈</a>
</div>
<div class="red_packet animated">

</div>
<!-----------------------------------以上是侧边栏内容------------------------------->
<div class="wrapper clear">
    <div class="head clear">
        <img src="img/11.png" class="Personal_login">
        <img src="img/10.png" class="mailbox">
        <img src="img/9.png" class="Olympic_version">
    </div>
    <!--------------------------------以上是头部---------------------------------------->
    <div class="Advertisement"></div>
    <!--------------------------------以上是广告---------------------------------------->
    <!--------------------------------以上是头部---------------------------------------->
    <div class="bg">
        <div class="wrapper-nav">
            <ul class="nav clear">
                <li><a href="#" style="color:#ff3333">推荐</a></li>
                <li><a href="#">新闻</a></li>
                <li><a href="#">娱乐</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">财经</a></li>
                <li><a href="#">汽车</a></li>
                <li><a href="#">军事</a></li>
                <li><a href="#">图片</a></li>
                <li><a href="#">视频</a></li>
                <li><a href="#">段子</a></li>
                <li><a href="#">时尚</a></li>
                <li><a href="#">本地</a></li>
                <li><a href="#">订阅</a></li>
                <li><a href="#">手机</a></li>
                <li><a href="#">公开课</a></li>
                <li><a href="#">科技</a></li>
                <li><a href="#">跟帖</a></li>
                <li><a href="#">游戏</a></li>
                <li><a href="#">数码</a></li>
                <li><a href="#">教育</a></li>
                <li><a href="#">健康</a></li>
                <li><a href="#">独家</a></li>
                <li><a href="#">旅游</a></li>
                <li><a href="#">亲子</a></li>
                <li><a href="#">星闻</a></li>
                <li><a href="#">房产</a></li>
                <li><a href="#">家居</a></li>
                <li><a href="#">小说</a></li>
                <li><a href="#">漫画</a></li>
                <li><a href="#">BoBo</a></li>
                <li><a href="#">更多</a></li>
            </ul>
            <ul class="right">
                <li class="triangle">∨</li>
                <li class="triangle1">∧</li>
            </ul>
        </div>
    </div>

    <!----------------------------------------以上是导航----------------------------->
    <div class="wrapper_banner">
        <div class="banner clear">
            <a href="#"><img src="img/20.jpg" alt="7"/></a>
            <a href="#"><img src="img/14.jpg" alt="1"/></a>
            <a href="picture.html"><img src="img/44.jpg" alt="2"/></a>
            <a href="#"><img src="img/16.jpg" alt="3"/></a>
            <a href="#"><img src="img/17.jpg" alt="4"/></a>
            <a href="#"><img src="img/18.jpg" alt="5"/></a>
            <a href="#"><img src="img/19.jpg" alt="6"/></a>
            <a href="#"><img src="img/20.jpg" alt="7"/></a>
        </div>
    </div>
    <!---------------------------------以上是banner轮播---------------------->
    <div class="wrapper_News_flash_w">
        <div class="wrapper_News_flash">
            <div class="News_flash" style="bottom: 0.0275rem">
                <span class="N_title">快讯</span>
                <span class="N_brief_introduction">军委三部门:严禁违规插手基层征兵等六种行为</span>
            </div>
            <div class="News_flash" style="transform: rotateX(180deg) translate3d(0,0,0);top: 0.0275rem">
                <span class="N_title" style="background: #4c9aea">直播</span>
                <span class="N_brief_introduction">东莞"逆行撞后车"路怒司机被批捕 涉寻衅滋事罪</span>
            </div>
        </div>
    </div>
    <!---------------------------------以上是新闻快讯内容---------------------->
    <p style="border-bottom:1px solid #e5e5e5;width: 7rem;margin: 0 auto"></p>
    <!---------------------------------以上是分割线内容---------------------->
    <div class="wrapper_Olympic_News clear">
        <div class="w_O_W">
            <div class="No_" style="font-size: 0.2rem">第</div>
            <div class="Game_day">
                <div class="Date_ clear">
                    <div style="width: 0.54rem;margin: 0 auto" class="clear">
                        <span class="Number_0"></span>
                        <span class="Number_5"></span>
                    </div>
                </div>
                <div class="Game_day_1"></div>
            </div>
        </div>
        <div class="Olympic_News" style="font-size: 0.1rem">
            <p class="O_N_Title">奥运特讯</p>
        </div>
        <span class="fen"></span>
        <div class="scrolled_wrapper">
            <ul class="s_w">
                <li><a href="#">自行车女团竞速 中国夺金牌</a></li>
                <li><a href="#">中国包揽男20km竞走金银牌</a></li>
                <li><a href="#">孙杨1500米自由泳预赛出局</a></li>
                <li><a href="#">王军霞1万米世界纪录被打破</a></li>
                <li><a href="#">自行车女团竞速 中国夺金牌</a></li>
            </ul>
        </div>
    </div>
    <!---------------------------------以上是奥运热讯内容---------------------->
    <div class="wrapper_Medal_table clear">
        <div class="wrapper_Medal_table_1">
            <div class="wrapper_Medal_table_title"></div>
            <div class="fen1"></div>
        </div>
        <div class="wrapper_Medal_count clear">
            <p class="Medal_count_title">中国代表团 第2名</p>
            <div class="medal_count">
                <span class="gold">13</span>
                <span class="silver">10</span>
                <span class="copper">14</span>
            </div>
        </div>
    </div>
    <!---------------------------------以上是奖牌榜内容---------------------->
    <div class="wrapper_Main_contents">
        <div class="Main_contents_one clear">
            <div class="Main_contents_one_left">
                <p class="special">专题</p>
                <img src="img/31.jpg" style="width: 1.98rem;height: 1.485rem" class="dj">
            </div>
            <div class="Main_contents_one_right clear">
                <p class="brief_introduction">习近平就巴基斯坦重大恐袭事件向巴总统致慰问电</p>
                <div class="wrapper_Main_contents_one_right_bottom">
                    <div class="Main_contents_one_right_bottom clear">
                        <div class="Message_type">新闻</div>
                        <div class="How_long_ago">5分钟前</div>
                    </div>
                    <div class="wrapper_Browsing_number clear">
                        <div class="Browsing_number_log iconfont">&#xe65e;</div>
                        <div class="Browsing_number">2984</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="Main_contents_one clear" style="margin-top: 0.255rem">
            <div class="Main_contents_one_left">
                <!--<p class="special">专题</p>-->
                <img src="img/32.jpg" style="width: 1.98rem;height: 1.485rem" class="dj">
            </div>
            <div class="Main_contents_one_right clear">
                <p class="brief_introduction">北京积分落户新政:在京连续缴纳社会保险需满7年</p>
                <div class="wrapper_Main_contents_one_right_bottom">
                    <div class="Main_contents_one_right_bottom clear">
                        <div class="Message_type">推荐</div>
                        <div class="How_long_ago">1小时前</div>
                    </div>
                    <div class="wrapper_Browsing_number clear">
                        <div class="Browsing_number_log iconfont">&#xe65e;</div>
                        <div class="Browsing_number">7031</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="Main_contents_one clear" style="margin-top: 0.255rem">
            <a href="News%20page.html" style="text-decoration: none">
            <div class="Main_contents_one_left">
                <!--<p class="special">专题</p>-->
               <img src="img/72.png" style="width: 1.98rem;height: 1.485rem" class="dj">
            </div>
            <div class="Main_contents_one_right clear">
                <p class="brief_introduction">高铁晚点不赔成"行业惯例" 专家:建统一赔偿标准</p>
                <div class="wrapper_Main_contents_one_right_bottom">
                    <div class="Main_contents_one_right_bottom clear">
                        <div class="Message_type">推荐</div>
                        <div class="How_long_ago">1小时前</div>
                    </div>
                    <div class="wrapper_Browsing_number clear">
                        <div class="Browsing_number_log iconfont">&#xe65e;</div>
                        <div class="Browsing_number">7031</div>
                    </div>

                </div>
            </div>
            </a>
        </div>
        <div class="Main_contents_one clear" style="margin-top: 0.255rem">
            <div class="Main_contents_one_left">
                <!--<p class="special">专题</p>-->
                <img src="img/33.jpg" style="width: 1.98rem;height: 1.485rem" class="dj">
            </div>
            <div class="Main_contents_one_right clear">
                <p class="brief_introduction">中国渔船与希腊货船在钓鱼岛相撞 日巡逻艇救6人</p>
                <div class="wrapper_Main_contents_one_right_bottom">
                    <div class="Main_contents_one_right_bottom clear">
                        <div class="Message_type">新闻</div>
                        <div class="How_long_ago">4小时前</div>
                    </div>
                    <div class="wrapper_Browsing_number clear">
                        <div class="Browsing_number_log iconfont">&#xe65e;</div>
                        <div class="Browsing_number">9万</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="Main_contents_one clear" style="margin-top: 0.255rem">
            <div class="Main_contents_one_left">
                <!--<p class="special">专题</p>-->
                <img src="img/34.jpg" style="width: 1.98rem;height: 1.485rem" class="dj">
            </div>
            <div class="Main_contents_one_right clear">
                <p class="brief_introduction">国土部:划定永久基本农田绝不许搞"狸猫换太子</p>
                <div class="wrapper_Main_contents_one_right_bottom">
                    <div class="Main_contents_one_right_bottom clear">
                        <div class="Message_type">新闻</div>
                        <div class="How_long_ago">5小时前</div>
                    </div>
                    <div class="wrapper_Browsing_number clear">
                        <div class="Browsing_number_log iconfont">&#xe65e;</div>
                        <div class="Browsing_number">5万</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="Main_contents_one clear" style="margin-top: 0.255rem">
            <div class="Main_contents_one_left">
                <!--<p class="special">专题</p>-->
                <img src="img/35.jpg" style="width: 1.98rem;height: 1.485rem" class="dj">
            </div>
            <div class="Main_contents_one_right clear">
                <p class="brief_introduction">电子票据也出了大案:涉案某大行接入系统已暂停</p>
                <div class="wrapper_Main_contents_one_right_bottom">
                    <div class="Main_contents_one_right_bottom clear">
                        <div class="Message_type">财经</div>
                        <div class="How_long_ago">50分钟前</div>
                    </div>
                    <div class="wrapper_Browsing_number clear">
                        <div class="Browsing_number_log iconfont">&#xe65e;</div>
                        <div class="Browsing_number">909</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="Main_contents_one clear" style="margin-top: 0.255rem">
            <div class="Main_contents_one_left">
                <!--<p class="special">专题</p>-->
                <img src="img/36.jpg" style="width: 1.98rem;height: 1.485rem" class="dj">
            </div>
            <div class="Main_contents_one_right clear">
                <p class="brief_introduction">丁宁4-3李晓霞首夺奥运乒球女单金牌 加冕大满贯</p>
                <div class="wrapper_Main_contents_one_right_bottom">
                    <div class="Main_contents_one_right_bottom clear">
                        <div class="Message_type">体育</div>
                        <div class="How_long_ago">5小时前</div>
                    </div>
                    <div class="wrapper_Browsing_number clear">
                        <div class="Browsing_number_log iconfont">&#xe65e;</div>
                        <div class="Browsing_number">6万</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!---------------------------------以上是主体内容---------------------->
    <footer>
        <p class="copyright">©1997-2016网易公司版权所有</p>
    </footer>
    <!---------------------------------以上是底栏信息内容---------------------->
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    var w = window.innerWidth
    if (w > 750) {
        w = 750
    }
    document.getElementsByTagName('html')[0].style.fontSize = w / 7.5 + 'px'
   // 以上是获得窗口的视宽//
    var abc = 0
    setInterval(function () {

        if (abc == 7) {
            abc = 0
            $('.banner').css({left: -7.5 * abc + 'rem'})
        }
        abc++
        $('.banner').animate({left: -7.5 * abc + 'rem'},600,'linear')

    }, 3000)
    var g=0
    $('.banner').get(0).addEventListener('touchstart',function (e) {
        var x=e.touches[0].pageX
        ol=$(this).css('left')
        $('.banner').get(0).addEventListener('touchstart',function (el) {
            l=el.touches[0].pageX-x
            $(this).css('left',parseInt(l)+parseInt(ol))
        })
    })
    $('.banner').get(0).addEventListener('touchend',function (ell) {
        if (l<0){
            if(g==8){
                g=7
            }
            g++
            $('.banner').animate({left:7.5+'rem'},200,'linear')
        }
        if (l>0){
            if (g==0){
                g=1
            }
            g--
            $('.banner'). animate({left:-7.5*g+'rem'},200,'linear')
        }
        $('.picture').off()
    })
    // 以上是轮播//
    var div = document.getElementsByClassName('wrapper_News_flash')[0]
    setInterval(function () {
        var oc = div.className
        if (oc.indexOf('abc') == -1) {
            div.className = 'wrapper_News_flash abc'
        } else {
            div.className = 'wrapper_News_flash'
        }
    }, 3000)
    // 以上是新闻快讯内容//

    var aaa = 0
    setInterval(function () {

        if (aaa == 4) {
            aaa = 0
            $('.s_w').css({top: -0.4 * aaa + 'rem'})
        }
        aaa++
        $('.s_w').animate({top: -0.4 * aaa + 'rem'})

    }, 2000)

    // 以上是奥运热讯内容//
    $(window).scroll(function () {
        var body=document.body
        if (body.scrollTop>250){
            $('.icon-gotop').css('display','block')
            $('.feed_back').css('display','block')
        }else {
            $('.icon-gotop').css('display','none')
            $('.feed_back').css('display','none')
        }
        $('.w_icon-gotop').click(function () {
            document.body.scrollTop=0
        })
    })
    // 以上是返回顶部//
    $('.Personal_login').click(function () {
        $('.Login_interface').animate({left: 0 + 'rem'})
        $('.black').css('display', 'block')
        $('.Login_interface').css('position','fixed')
        $('.black').css('position','fixed')
    })
    $('.black').click(function () {
        $('.Login_interface').animate({left: -3.3 + 'rem'})
        $('.black').css('display', 'none')
    })

    $('.triangle').click(function () {
        $('.nav').css('left', 0)
        $(this).css('display', 'none')
        $('.wrapper-nav').animate({height: 3.1 + 'rem'}, 200, 'linear')
        $('.nav').css({width: 7.5 + 'rem'})
        $('.triangle1').css('display', 'block')
    })
    $('.triangle1').click(function () {
        $(this).css('display', 'none')
        $('.wrapper-nav').animate({height: 0.6 + 'rem'}, 50, 'linear')
        $('.nav').animate({width: 34.24 + 'rem'}, 50, 'linear')
        $('.triangle').css('display', 'block')
    })
    $('.nav').get(0).addEventListener('touchstart', function (e) {
        var x = e.touches[0].pageX
        var k = $('.nav').css('left')
        $(document).get(0).addEventListener('touchmove', function (e1) {
            var l = e1.touches[0].pageX - x
            $('.nav').css('left', parseInt(l) + parseInt(k))
            var h = parseInt(l) + parseInt(k)
            if (h <= -(parseInt($('.nav').width())) + w) {
                $('.nav').css('left', -(parseInt($('.nav').width())) + w + 'px')
            }
            if (h > 0) {
                $('.nav').css('left', 0 + 'px')
            }
            return false
        })
        return false
    })
    $('.nav').get(0).addEventListener('touchend', function () {
        $(document).off()
        return false
    })
</script>
</body>
</html>